import React from 'react'
// ===================================================================== Temp
import SearchForm from '#cpt/temp/SearchForm'
import Table from '#cpt/temp/Table'
import AddEditModal from '#cpt/temp/AddEditModal'
import TableControls from '#cpt/temp/TableControls'
import Controls from '#cpt/temp/Controls'
import Confirm from '#cpt/temp/Confirm'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const Page 				= $Lazy.load(()=>import('#tp/page/page-container'))
const $cache 			= $Lazy.file(()=>import('#private/cache-api'))
// 
const PrinterSetModal 	= $Lazy.state(()=>import('#private/pages/printer-set-modal'))
const ReceiveModal 		= $Lazy.state(()=>import('./cpt/receive-modal'))
const BoxAllot 			= $Lazy.state(()=>import('./cpt/box-allot-modal'))
// ===================================================================== antd
// ===================================================================== data
// 标本箱类型
const boxTypeData = [
	{ name:'系统标箱', value:'1'},
	{ name:'虚拟标箱', value:'2'},
	{ name:'自动分配', value:'3'},
]
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		selectedKeys:[],
		selectedRows:[],
		// 搜索表单列表
		forms : [
			{ label: '标箱条码',		name: 'box_code' },
			{ label: '标箱编号',		name: 'box_number' },
			{ label: '地址',		name: 'address' },
			{ label: '创建时间',		names: ['created_at_start_date','created_at_end_date'], type:'date-range' },
			{ label: '标本箱状态',	name: 'box_status', type: 'select'},
		],
		// 提交表单列表
		formData : [
			{ label: '标箱条码',			name: 'box_code', 		half:true,  required:true },
			{ label: '办事处地址',		name: 'address_id', 	half:true, 	required:true, type:'select' },
			{ label: 'gps设备',			name: 'gps_id', 		half:true,  required:true, type:'select' },
			{ label: '容量',			name: 'spec_count', 	half:true,  required:true, type:'number' },
			{ label: '标箱状态',			name: 'box_status', 	half:true,  required:true, type:'select' },
			
		]
	}
	
	model = {}
	
	componentDidMount(){
		this.getSelect()
		if(window.isInit){
		  this.fetch()
		}
	}
	// 获取下拉数据
	getSelect = () => {
		const { forms } = this.state
		
		$cache.then( async f => {
			// 标箱状态
			const _data = await f.getDisCache({ code:80 } )
			
			for(var i = 0; i < _data.length; i++){
				if(_data[i].name === '不可用'){
					_data.splice(i,1);
				}
			}
			$fn.setRow(forms, 'box_status', _data)
			
			this.setState({ forms })
		})
	}
	
	// 获取弹框下拉
	getModalSelect = async () => {
		const { formData } = this.state
		$fn.setModalRows(formData, [ 'address_id', 'gps_id','box_status' ], ()=>{
			$cache.then( async f => {
				// 办事处地址
				$fn.setRow(formData, 'address_id', await f.getCache({ api:'box_address'} ) )
				// gps设备
				$fn.setRow(formData, 'gps_id', await f.getCache({ api:'gps' } ) )
				// 标箱状态
				$fn.setRow(formData, 'box_status', await f.getDisCache({ code:80 } ) )
				this.setState({ formData })
			})
		})
	}
	
	// paging
	fetch = () => $fn.fetch.call(this,'box/index')
	
	// 表单
	cols = [
		{ title: '标箱条码',					dataIndex: 'box_code', 			width:150 },
		{ title: '标箱编号', 				dataIndex: 'box_number', 		width:150 },
		{ title: 'gps设备', 				dataIndex: 'gps_number', 		width:100 },
		{ title: '办事处地址', 				dataIndex: 'address', 			width:200 },
		{ title: '容量', 					dataIndex: 'total_count',		width:100 },
		{ title: '标本箱状态', 				dataIndex: 'box_status_name', 	width:100 },
		{ title: '创建时间', 				dataIndex: 'created_at', 		...$fn.table.time },
		{ title: '类型', 					dataIndex: 'type',	width:100, render: text => $fn.getState(boxTypeData, text) },
		TableControls.controls.call(this,{ width: 100, align:'left' })
	]
	table_controls = (text, { uuid, box_status, type }) => {
		return [
			TableControls.edit.call(this, 'box/info', {uuid, box_status:+box_status, type:+type}, { 
				select: this.getModalSelect,
				ids: ({type}) => ( { type }),
				click: ()=>{
					$fn.disabledRows(this.state.formData, ['box_code', 'gps_id'], true)
					$fn.hideRows(this.state.formData, ['box_status'], false)
					$fn.dataRemove('sp-gps-device/select')
				}
			}),
			+box_status === 85 ? TableControls.click.call(this, '分配', ()=> {this.boxAllotModal.open(uuid)}):null
		]
	}
	// 操作按钮
	controls = () => {
		return [
			Controls.add.call(this, { click: ()=>{
				const { formData } = this.state
				this.getModalSelect()
				$fn.hideRows(formData, ['box_status'], true)
				$fn.disabledRows(this.state.formData, ['box_code', 'gps_id'], false)
				this.setState({ formData })
				this.submit = {type: 1}
			} }),
			Confirm.call(this, '禁用', 'box/delete', { isKeys: 1 }),
			Confirm.call(this, '退回', 'box/return', { isKeys: 1 }),
			
			Controls.click.call(this,'领取', ()=> this.receiveModal.open($fn.getSelectedRows.call(this)), { isKeys:1 }),
			Controls.printer.call(this, { batch:true, code:50102 }),
			// 导入
			Controls.imports.call(this,'box/import', {op_key: 'BoxExcel', reconfirm: true}),
			// 下载导入模板
			Controls.importTemplate.call(this),
		]
	}
	
	render(){
		return (
			<>
				<Page title='标本箱' controls={this.controls()}>
					{/* 搜索 */}
					{ SearchForm.call(this) }
					{/* 表格 */}
					{ Table.call(this, { isInit: window.isInit }) }
				</Page>
				{/* 添加、编辑 */}
				{ AddEditModal.call(this,{ labelWidth:'s7', width:800, api: 'box/add', editApi: 'box/edit'}) }
				{/* 批量打印 */}
				<PrinterSetModal onRef={ref=>this.printerModal = ref} />
				{/* 领取 */}
				<ReceiveModal onRef={ref=>this.receiveModal = ref} onRefresh={()=>this.fetch()} />
				<BoxAllot onRef={ref=>this.boxAllotModal = ref} onRefresh={()=>this.fetch()} />
			</>
		)
	}
}

export default Index